<script setup lang="ts">
import {ref, inject} from 'vue';
import {formatDateText} from '@/utils/index';
import {number2text} from '@/utils/index';
const rowData = inject('rowData');
const currenDate = formatDateText(new Date());
</script>

<template>
  <div class="container">
    <div class="title">
      <p>德阳市旌龙再生资源有限公司</p>
      <p>回收车辆报销单</p>
      <p class="date">申请日期:{{ currenDate }}</p>
    </div>
  </div>
  <table>
    <tr>
      <th style="width:58px">车型</th>
      <th style="width:94px">车牌号</th>
      <th style="width:98px">三元/电机/轮胎 是否缺失</th>
      <th style="width:46px">铝/铁钢盆</th>
      <th style="width:44px">重量/千克</th>
      <th style="width:40px">单价</th>
      <th >总价</th>
      <th  style="width:40px">预扣个税</th>
      <th style="width:40px"  >运补</th>
      <th style="width:50px" >实付</th>
    </tr>
    <!-- 5 empty rows for data entry -->
    <template v-for="item in rowData" :key="item.formId">
      <tr><td>{{item['车辆类型']}}</td><td>{{item['号牌号码']}}</td><td></td><td></td><td>{{item.weight}}</td><td>{{item.unitPrice}}</td><td>{{item.price}}</td><td>{{item.tax}}</td><td>{{item.primage}}</td><td>{{item.finalPrice}}</td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </template>
<!--    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>-->
<!--    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>-->
<!--    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>-->
<!--    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>-->
<!--    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>-->
    <tr class="bottom-row">
      <td>收款人</td>
      <td colspan="2">{{rowData[0]['收款人']}}</td>
      <td colspan="2">收款人银行</td>
      <td colspan="6">{{JSON.parse(rowData[0].carInfo.value)['收款银行'] }}</td>
    </tr>
    <tr class="bottom-row">
      <td style="width:70px">联系电话</td>
      <td colspan="2">{{rowData[0].phone}}</td>
      <td colspan="2">收款人账号</td>
      <td colspan="5">{{JSON.parse(rowData[0].carInfo.value)['收款账户']}}</td>
    </tr>
    <tr class="bottom-row">
      <td colspan="2">收款人身份证</td>
      <td colspan="8">{{JSON.parse(rowData[0].carInfo.value)['身份证号码']}}</td>
    </tr>
    <tr class="bottom-row" style="text-align: left">
      <td colspan="10" style="letter-spacing: 3px">
        合计实付金额（大写）： {{number2text(rowData[0].finalPrice)}}
<!--        ___仟___佰___拾___万___仟___佰___拾___角___分-->
      </td>
    </tr>
    <tr class="bottom-row">
      <td width="58px">审批意见</td>
      <td colspan="2">
        <template v-if="rowData[0].auditProcess!==null&&rowData[0].auditProcess.length ">
          <el-image style="width: 100%;height: 50px" :src="rowData[0].auditProcess[0]['签名']" :fit="'contain'"/>
        </template>
      </td>
      <td width="58px">财务意见</td>
      <td colspan="2">
        <template v-if=" rowData[0].auditProcess!==null&&rowData[0].auditProcess.length>=2&&rowData[0].auditProcess[1]['签名']">
        <el-image style="width: 100%;height: 50px" :src="rowData[0].auditProcess[1]['签名']" :fit="'contain'"/>
        </template>
      </td>
      <td width="96px">经办人或代理人</td>
      <td colspan="3">
        <template v-if="rowData[0].auditProcess!==null&&rowData[0].auditProcess.length>=3&&rowData[0].auditProcess[2]['签名']">
    <el-image style="width: 100%;height: 50px" :src="rowData[0].auditProcess[2]['签名']" :fit="'contain'"/>
        </template>
      </td>
    </tr>
    <tr>
      <td colspan="10" class="footer" style="text-align: center;">
        备注：未尽方面，须按专项制度解释说明，并以上级的文字说明为准。
      </td>
    </tr>
  </table>
</template>

<style scoped lang="scss">
.container {
  position: relative;
  .el-descriptions{
    :deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell){
      padding: 10px 0;
      text-align: center;
      border: black 1px solid;
    }
  }
}
.title {
  position: relative;
  text-align: center;
  line-height: 24px;
  font-size: 18px;
  color: black;
  font-weight: 400;
  margin-bottom: 10px;
  letter-spacing: 5px;
  .date{
    font-size: 12px;
    position: absolute;
    right: 0;
    bottom: 0;
    letter-spacing: 3px;
  }
}
.date-row {
  letter-spacing: 5px;
  text-align: center;
}

table {
  text-align: center;
  border-collapse: collapse;
  width: 100%;
  max-width: 800px;
  margin: 0 auto 20px;
  font-size: 12px;
}

th, td {
  border: 1px solid black;
  padding: 4px;
  height: 30px;
}

.header {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  padding: 10px;
}

.date-line {
  text-align: right;
  padding-right: 50px;
}

.bottom-row td {
  height: 40px;
}

.footer {
  font-size: 12px;
  text-align: left;
  padding: 10px;
}

////处理打印样式
//@media print {
//  table {
//    font-size: 12px;
//    //height: 50%;
//  }
//  th,tr,
//  td {
//   padding: 12px;
//  }
//}
</style>
